<template>
  <div class="demo-title">pull-refresh/demo1</div>
  <div class="demo">
    <Tabs v-model="tabKey" background="#eee">
      <TabPane pane-key="tabBase" title="基础用法">
        <PullRefresh v-model:refreshing="baseRefreshing" @refresh="refreshBase" @change="changeBase">
          <div class="try">向下拉试试吧。。</div>
        </PullRefresh>
      </TabPane>
      <TabPane pane-key="tabCustom" title="自定义文案">
        <PullRefresh v-model:refreshing="customRefreshing" @refresh="refreshCustom" loosing-text="放手吧" loading-text="正在放手中..." complete-text="放手成功">
          <div class="try">向下拉试试吧。。</div>
        </PullRefresh>
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import PullRefresh from '@sscd-mobile/pull-refresh'
  import { Tabs, TabPane } from '@sscd-mobile/tabs'
  const tabKey = ref('tabBase')
  // 基础用法
  const baseRefreshing = ref(false)
  const refreshBase = () => {
    setTimeout(() => baseRefreshing.value = false, 1000)
  }
  const changeBase = (e) => console.log('changeBase: ', e)
  // 自定义文案
  const customRefreshing = ref(false)
  const refreshCustom = () => {
    setTimeout(() => customRefreshing.value = false, 1000)
  }
</script>

<style lang="less" scoped>
  .demo {
    .try {
      padding-top: 60px;
      height: 100vh;
      text-align: center;
    }
  }
</style>
